import React, { useRef, useEffect, useState } from 'react';
import * as echarts from 'echarts';
import dataFile from '../../data/nameofpeople/dataFile.json';
import roleFile from '../../data/nameofpeople/roleFile.json';


const ROOT_PATH = 'D:\\workshop\\react_echarts\\src'; // 根据你的项目结构设置这个路径

export default function NameofpeoplePage() {

    const chartRef = useRef(null);
    //useState让函数NameofpeoplePage成为一个带有状态的函数组件
    //useState([])是一个初始化赋值语句，他说明这个函数的状态组件中的state是一个空数组
    //const [data, setData] = useState([]);表达的是一个赋值语句，useState返回的是一个数组
    //数组的0号元素赋值给了data,1号元素赋值给了setData
    //那么0号元素是数据，1号元素是操作数据的方法
    //数组的解构赋值
    //useState是React Hook,他允许你向组件添加一个状态变量
    //添加一个数组状态变量data,data的值为空数组
    const [data, setData] = useState([]);
    //添加一个对象状态变量roles
    const [roles, setRoles] = useState([]);
    const [chapters, setChapters] = useState([]);
    //添加一个数字类型的状态变量startIndex，他的初始值是10
    const [startIndex, setStartIndex] = useState(0);
    //添加一个数字类型的状态变量currentChapter，他的初始值是null
    const [currentChapter, setCurrentChapter] = useState(null);
    //页面更新频率
    const updateFrequency = 2000;
    const dimension = 0;

    // 国家颜色映射
    const roleColors = {
        祁同伟: '#91CC75',
        高小琴: '#91CC75',
        高育良: '#5470C6',
        欧阳菁: '##5470C6',
        季昌明: '#EE6666',
        陈岩石: '#FAC858',
        赵东来: '#EE6666',
        李达康: '#EE6666',
        易学习: '#FAC858',
        张树立: '#91CC75',
        陆亦可: '#FAC858',
        沙瑞金: '#EE6666',
        孙连城: '#FAC858',
        刘省长: '#FAC858',
        张华华: '#FAC858',
        王大路: '#EE6666',
        蔡成功: '#5470C6',
        王文革: '#5470C6',
        郑西坡: '#FAC858',
        陈海: '#FAC858',
        赵瑞龙: '#91CC75',
        赵德汉: '#5470C6',
        丁义珍: '#5470C6',
        刘新建: '#5470C6',
        赵立春: '#91CC75',
        侯亮平: '#FAC858'
    };

    // 获取人物的图标图标
    //图标在role.json中
    const getPortrait = (roleName) => {
        if (!roleName) return '';
        console.log(roles.find((item) => item.name === roleName) || {});
        return (roles.find((item) => item.name === roleName) || {}).emoji || '';
    };

    // 初始化图表
    useEffect(() => {
        const initChart = async () => {
            try {
                // 从外部文件获取数据
                // 处理数据
                const role = roleFile;
                const data = dataFile;
                const chaptersArray = [];

                //抽取章节数据到chaptersArray
                for (let i = 0; i < data.length; ++i) {
                    if (chaptersArray.length === 0 || chaptersArray[chaptersArray.length - 1] !== data[i][2]) {
                        chaptersArray.push(data[i][2]);
                    }
                }

                setRoles(role);
                setData(data);
                setChapters(chaptersArray);
                //数据的展示从第一个元素开始
                setCurrentChapter(chaptersArray[startIndex]);

                // 初始化图表
                if (chartRef.current) {
                    const myChart = echarts.init(chartRef.current);

                    const option = {
                        grid: {
                            top: 10,
                            bottom: 30,
                            left: 150,
                            right: 80
                        },
                        xAxis: {
                            max: 'dataMax',
                            axisLabel: {
                                formatter: (n) => Math.round(n) + ''
                            }
                        },
                        dataset: {
                            source: data.slice(1).filter((d) => d[2] === 1980)
                        },
                        yAxis: {
                            type: 'category',
                            inverse: true,
                            max: 14,
                            axisLabel: {
                                show: true,
                                fontSize: 14,
                                //同时显示名字和任务的emoji
                                // formatter: (value) => `${value} {flag|${getPortrait(value)}}`,
                                formatter: (value) => `{flag|${getPortrait(value)}}`,
                                rich: {
                                    flag: {
                                        fontSize: 25,
                                        padding: 5
                                    }
                                }
                            },
                            animationDuration: 300,
                            animationDurationUpdate: 300
                        },
                        // yAxis: {
                        //     type: 'category',
                        //     inverse: true,
                        //     max: 14,
                        //     axisLabel: {
                        //         show: true,
                        //         fontSize: 14,
                        //         formatter: (value) => {
                        //             const imageUrl = getPortrait(value);
                        //             return [
                        //                 `${value} {img|}`
                        //             ]; // 使用换行符分隔图片和文字
                        //         },
                        //         rich: {
                        //             img: {
                        //                 width: 25, // 图片宽度
                        //                 height: 25, // 图片高度
                        //                 backgroundImage: (params) => {
                        //                     const imageUrl = getPortrait(params.value);
                        //                     return imageUrl ? `url(${imageUrl})` : 'none';
                        //                 },
                        //                 borderColor: '#ccc',
                        //                 borderWidth: 1,
                        //                 borderRadius: 4
                        //             }
                        //         }
                        //     },
                        //     animationDuration: 300,
                        //     animationDurationUpdate: 300
                        // },
                        series: [
                            {
                                realtimeSort: true,
                                seriesLayoutBy: 'column',
                                type: 'bar',
                                itemStyle: {
                                    // 这里的parm是content.json中的一条数据
                                    color: (param) => roleColors[param.value[1]] || '#5470c6'
                                },
                                encode: {
                                    x: dimension,
                                    y: 3
                                },
                                label: {
                                    show: true,
                                    precision: 0,
                                    position: 'right',
                                    valueAnimation: true,
                                    fontFamily: 'monospace'
                                }
                            }
                        ],
                        animationDuration: 0,
                        animationDurationUpdate: updateFrequency,
                        animationEasing: 'linear',
                        animationEasingUpdate: 'linear',
                        graphic: {
                            elements: [
                                {
                                    type: 'text',
                                    right: 160,
                                    bottom: 60,
                                    style: {
                                        text: currentChapter,
                                        font: 'bolder 80px monospace',
                                        fill: 'rgba(100, 100, 100, 0.25)'
                                    },
                                    z: 100
                                }
                            ]
                        }
                    };

                    myChart.setOption(option);
                    // setTimeout两个参数，一个表示要做的事情，一个表示延迟的时间
                    for (let i = startIndex; i < chaptersArray.length - 1; ++i) {
                        setTimeout(() => {
                            updateChapter(myChart, chaptersArray[i + 1]);
                        }, (i - startIndex) * updateFrequency);
                    }

                    // 更新章节数据
                    function updateChapter(myChart, chapter) {
                        const source = data.slice(1).filter((d) => d[2] === chapter);
                        myChart.setOption({
                            dataset: {
                                source
                            },
                            graphic: {
                                elements: [
                                    {
                                        type: 'text',
                                        right: 160,
                                        bottom: 25,
                                        style: {
                                            text: "故事线: "+chapter,
                                            fontSize: 20,
                                            fontWeight: 'bold',
                                            fill: '#000',
                                        }
                                    }
                                ]
                            }
                        });
                    }
                }
            } catch (error) {
                console.error('Error fetching or initializing chart:', error);
            }
        };

        initChart();
    }, [startIndex, currentChapter]);

    return (
        <div>
            <h2>人民的名义</h2>
            <div ref={chartRef} style={{ height: '830px', width: '100%' }}></div>
        </div>
    )
}
